@keyframes headAni1 {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }

  100% {
    transform: translate3d(0px, 640px, 0px);
  }
}

@keyframes headAni4 {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }

  100% {
    transform: translate3d(0px, 440px, 0px);
  }
}

@keyframes btnAni {
  0% {
    transform: translate(-50%,-50%) scale(1,1);
  }
  50% {
    transform: translate(-50%,-50%) scale(1.02,1.02);
  }

  100% {
    transform: translate(-50%,-50%) scale(1,1);
  }
}

@keyframes yaobai {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  16.6% {
    transform: translate(-50%,-50%) rotate(-1.5deg);
  }

  33.3% {
    transform: translate(-50%,-50%) rotate(1.5deg);
  }

  49.8% {
    transform: translate(-50%,-50%) rotate(-1.5deg);
  }

  66.6% {
    transform: translate(-50%,-50%) rotate(1.5deg);
  }

  83.3% {
    transform: translate(-50%,-50%) rotate(-1.5deg);
  }

  100% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
}

:global {

  // @keyframes headAni1 {
  //   0% {
  //     transform: translate3d(0px,0px,0px);
  //   }
  //   100% {
  //     transform: translate3d(0px,200px,0px);
  //   }
  // }  
  .conBox2021Q1_1 {
    background: #fefefe;
    transition: all 0.6s;
    .con{
      height:100%;
      width: 100%;
      position: relative;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      transition: all 0.2s;
      transition-timing-function: ease-in-out;
    }
    .index_box{
      width: 100%;
      height: 100%;
      position: relative;
      transition: all 0.2s;
      overflow-y: auto;
      .page_img11{
        width: 100%;
        display: block;
      }
    }
    .list_page{
      position:absolute;
      height:100%;
      width: 100%;
      overflow: auto;
      left: 0px;
      top: 0px;
      box-sizing: border-box;
      .page_title{
        font-size: 43px;
        line-height: 43px;
        margin-top: 63px ;
        margin-left: 49px;
        margin-bottom: 63px ;
        font-weight: bold;      
      }
      .list_banner{
        width: 674px;
        height: 450px;
        position: relative;
        margin: 32px auto 16px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0px 9px 15px 2px rgba(0, 0, 0, 0.15);
        img{
          width: 680px;
          height: 452px;
          position: relative;
          padding: 0px;
          display: block;
        }
      }
      .list_items{
        .noAfter::after{
          content: none!important;
        }
       
      }

    }

    .ov_btn1{
      top: 660px;
    }
    .ov_btn2{
      top: 900px;
    }
    .ov_btn3{
      top: 1120px;
    }
    .ov_btn4{
      top: 1360px;
    }
      .list_item{
        width: 100%;
        height: 184px;
        left: 0px;
        background: rgba(255, 0, 0, 0);
        overflow: hidden;
        position: absolute;
      }

    .detailsBox{
      position: absolute;
      left: 100%;
      top: 0px;
      width: 100%;
      height: 100%;
      transition: all 0.2s;
      overflow: hidden;
    }


    .headAnimate1 {
      :local {
        animation: headAni1 2.5s 0s 1 cubic-bezier(0.96, -0.27, 0.56, 1.04) forwards;
      }
    }


  }

}